{% extends "templates.html" %}
{% block body %}
 <div class="container">
	<h1>Word Tokenizer</h1>
  <div class="row">
    <div class="col-sm-6">
	  <div class="form-group">
    <label for="sel1">Select engine:</label>
    <select class="form-control" id="engine1">
      <option value="newmm">newmm</option>
      <option value="longest">longest</option>
    </select>
    <label for="exampleFormControlTextarea1">Input Thai sentence</label>
    <textarea class="form-control" id="sent_text" rows="9">
      {{ app_config.text_samples["short"] }}
    </textarea><br>
	  <button type="button" class="btn btn-primary" id="send_word">Send</button>
  </div>
    </div>
    <div class="col-sm-6 other">
	  <div class="panel panel-primary">
		<div class="card bg-light text-dark"><div class="card-body" id="show_word"></div>
		</div>
    </div>
  </div>
</div>
{% endblock %}
{% block runjs %}
	<script>
    $("#send_word").click(function() {
        $.getJSON('/api/word_tokenizer', {
          sent: $('#sent_text').val(),
          engine:$('#engine1').val()
        }, function(data) {
          $("#show_word").html(data.result);
        });
    });
  </script>
{% endblock %}
